<template>
  
  <div class="app-container">
    <el-card shadow="always">
      <div v-if="myTeach===undefined||myTeach.teachAccount===undefined">
                  你还没有绑定指导老师哦！
      </div>
      <div  v-if="myTeach.teachAccount!==undefined">
      报告类型：
        <el-select size="20" v-model="params.reportType" @change="changeType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-progress :percentage="myPercentage" ></el-progress>{{myReportNum}}/{{relNum}}
          <br>   
          <div v-if="canComit">    
            <div>
              <el-row type="flex" class="app-container" :gutter="35">
                  报告标题:
                  <el-col :span="20">
                    <el-input v-model="params.reportTitle" placeholder="请输入报告标题"></el-input>
                  </el-col>
                </el-row>
            </div>
            <div>
              内容类型：
        <el-select size="20" v-model="params.contentType" @change="changeType" placeholder="请选择">
            <el-option
              v-for="item in contentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
            </div>
            <div v-if="params.contentType===0">
              报告内容：
              <el-row type="flex" class="app-container" :gutter="40">
                  <el-col :span="24">
                    <tinymce :height="300" v-model="params.content"></tinymce>
                  </el-col>
                </el-row>
            </div>
            <div v-if="params.contentType===1">
              <el-row :gutter="20">
                 <el-col :span="10">
                  <div>
                    <el-button type="primary"  ><a :href="templateUrl" >下载模板</a></el-button>
                  </div>
                 </el-col>
                <el-col :span="10">
                <div>
                  <el-upload
                      class="upload-demo"
                      :action="actionUrl"
                      :on-success="handleAvatarSuccess"
                      :before-remove="beforeRemove"
                      :before-upload="beforeAvatarUpload"
                      multiple
                      :limit="1"
                      accept=".doc,.docx">
                      <el-button size="small" type="primary" >点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过500kb</div>
                  </el-upload>
                </div>
                </el-col>
              </el-row>
            </div>   
            <div style="text-align:center"> 
            <el-button class="" type="primary" @click="addReport" plain> 提 交 </el-button>
            </div>
          </div>
          <div v-if="!canComit">
            该类型报告已经完成了哦！
          </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import tinymce  from '@/components/Tinymce'
import { addReport,getMyReportNum } from '@/api/report'
import { getMyTeach } from '@/api/teach'
import { getReportTemplate} from '@/api/setting'
export default {
    components: {
        tinymce 
    },
  data() {
    return {
      actionUrl:process.env.VUE_APP_BASE_UPLOAD,
      params:{
        content:'',
        reportTitle:'',
        contentType:0,
        reportType:0,
        reportLevel:1,
        fileUrl:'',
      },
      options: [{
          value: 0,
          label: '周报'
        }, {
          value: 1,
          label: '月报'
        }, {
          value: 2,
          label: '中期报告'
        }, {
          value: 3,
          label: '实训论文'
        }],
        contentOptions: [{
          value: 0,
          label: '在线填写'
        }, {
          value: 1,
          label: '上传文件'
        }],
        myPercentage:0,
        myReportNum:0,
        relNum:0,
        canComit:true,
        myTeach:{},
        templateUrl:'',
        reportTemplate:{
          weekTemplate:'',
          monthTemplate:'',
          centreTemplate:'',
          finalTemplate:''
        }
    }
  },
   //页面打开时执行的方法
  created() {
    this.changeType()
    this.getMyTeach()
    this.getReportTemplate()
  },
  computed:{
      uploadButton:function (){
       return ''
      }
    },
   methods: {
     async getMyTeach() {
      let res = await getMyTeach()
      this.myTeach = res.bean
    },
      addReport() {
        this.params.reportLevel = this.myReportNum+1
        addReport(this.params).then(()=>{
            this.$message({
              type: 'success',
              message: '提交报告成功!'
            })
            //跳转我的报告列表
            this.$router.push("/myReport")
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '提交报告失败!'
            })
            })

      },
      async changeType(){
        let res = await getMyReportNum(this.params)
        this.myReportNum = res.bean.myReportNum
        this.relNum = res.bean.relNum
        this.myPercentage = (this.myReportNum*100/this.relNum).toFixed(0)
        if(this.myReportNum>=this.relNum){
          this.canComit = false;
        }else{
           this.canComit = true;
        }
        if(this.params.reportType===0){
          this.templateUrl = this.reportTemplate.weekTemplate
        }else if(this.params.reportType===1){
          this.templateUrl = this.reportTemplate.monthTemplate
        }else if(this.params.reportType===2){
          this.templateUrl = this.reportTemplate.centreTemplate
        }else if(this.params.reportType===3){
          this.templateUrl = this.reportTemplate.finalTemplate
        }
      },
      handleAvatarSuccess(res, file) {
        this.params.fileUrl = res.bean.url
      },
      handleRemove(file, fileList) {
        this.params.fileUrl=''
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传文档大小不能超过 2MB!');
        }
        return  isLt2M;
      },
      async getReportTemplate() {
        let res = await getReportTemplate()
        this.reportTemplate = res.bean
    }
   }
}
</script>
